<!DOCTYPE html>
<html lang="en">
<head>
    <!--[if lt IE 7]>
    <div class="ie6_error">还在用<strong>漏洞百出的IE6浏览器</strong>么？为了您的网络安全，请升级浏览器 <a target="_blank"
                                                                               href="http://browsehappy.com">立即升级</a>
    </div>
    <![endif]-->
    <meta charset="UTF-8">
    <title>详细统计</title>
    <meta name="description"
          content="文具1号作为上海办公用品供货商公司,专为世界500强企业及SOHO办公族提供网上商城一站式办公耗材批发及采购服务,一站式选购办公日用文具用品,厂家直销,好货又便宜【阳光采购就上文具1号 阳光价格 老板放心 品质保障 员工省力】"/>
    <meta name="keywords" content="办公用品,办公文具,办公文具网站,文具网站,办公用品网,文具采购网,金万年"/>
    <meta name="copyright" content="上海易推信息科技有限公司"/>
    <meta name="renderer" content="webkit">
    <base href="<?php echo base_url(); ?>"/>
    <link rel="shortcut icon" href="favicon.ico"/>
    <link rel="stylesheet" href="public/js/layui/css/layui.css">
    <link rel="stylesheet" type="text/css" href="public/css/base.css"/>
    <link rel="stylesheet" type="text/css" href="public/css/common.css"/>
    <link rel="stylesheet" type="text/css" href="public/css/cost-center.css"/>
    <link rel="stylesheet" type="text/css" href="public/css/popup.css"/>
    <link rel="stylesheet" href="public/css/bootstrap-table.min.css">
    <link rel="stylesheet" href="public/css/bootstrap.css">
    <link rel="stylesheet" href="public/css/dcalendar.picker.css">
    <link rel="stylesheet" href="public/css/paging.css">
    <link rel="stylesheet" href="public/css/paging.css">
    <link rel="stylesheet" href="public/css/cqs.style.css">
    <!--[if lte IE 9]>
    <script type="text/javascript" src="public/js/html5shiv-printshiv-3.js"></script>
    <![endif]-->
    <style type="text/css">
        * {
            -webkit-box-sizing: unset;
            -moz-box-sizing: unset;
            box-sizing: unset;
        }

        dt, dd {
            line-height: unset;
        }

        .month {
            word-break: keep-all;
        }

        .box .pageWrap ul li {
            width: 59px;
        }

        caption {
            display: none;
        }

        .button-default {
            display: none;
        }

        .arrow-box {
            cursor: pointer;
        }

        #axe:hover {
            text-decoration: none;
            color: white;
        }
    </style>
</head>
<body style="background-color: #f4f4f4;">
<?php $this->load->view('common/header.php'); ?>

<div class="cqs-main">
    <form method="get" id="data-form">
        <div class="cqs-main_top cqs-mgt30">
            数据报表：<a class="cqs-clc40000" href="<?php echo base_url('information/information_purchase_goods'); ?>">成本中心＞采购排名</a>

            <div class="date-box">
      <span class="date-group">
          <input id='mydatepicker'
                 name="mydatepicker" <?php if (isset($mydatepicker)): ?> value="<?php echo $mydatepicker; ?>"  <?php endif; ?>
                 type='text'/>
          <!--        <img src="img/btn_arrow_down_h.png" alt="">-->
      </span> —
                <span class="date-group">
                <input id='mydatepicker2'
                       name="mydatepicker2" <?php if (isset($mydatepicker2)): ?> value="<?php echo $mydatepicker2; ?>"  <?php endif; ?>
                       type='text'/>
                    <!--        <img src="img/btn_arrow_down_h.png" alt="">-->
                </span>
            </div>

            <div class="cqs-search-group"><span class="cqs-img-search"><img
                            src="<?php echo base_url(); ?>public/img/icon_search_grey.png"
                            alt=""></span>
                <input class="form-control" type="text" id="product_name" name="product_name" placeholder="当前条件下搜索商品名称"
                       <?php if (isset($product_name)): ?>value="<?php echo $product_name; ?>" <?php endif; ?> ></div>
            <button type="submit" style="display: none"></button>
            <a id="axe" class="cqs-output" style="float: right; margin-right: 20px;margin-top:19px;">导出报表</a>
        </div>
    </form>


    <table class="" id="table" style="display: none">
        <tr>
            <th>序号</th>
            <th>商品ID</th>
            <th colspan="2">商品名称</th>
            <th>数量</th>
            <th>单价(元)</th>
            <th>小计(元)</th>
        </tr>
        <tbody>
        </tbody>
    </table>

    <div class="cqs-main_con table-responsive cqs-box cqs-mgb50 cqs-bgfff"><!--table table-bordered -->
        <table class="table cqs-table" style="border-bottom:1px solid #dddddd;">
            <tr>
                <th>序号</th>
                <th>商品ID</th>
                <th colspan="2" width="60%">商品名称</th>
                <th data-field="" data-sortable="true">
                    <span class="table-name">数量</span>

                    <?php if ($sort == 'num'): ?>
                        <?php if ($sort_d == 'asc'): ?>
                            <div class="arrow-box" data-dir="desc" data-field="num">
                                <span class="arrow-up up-red"></span>
                                <span class="arrow-down down-gray"></span>
                            </div>
                        <?php else: ?>
                            <div class="arrow-box" data-dir="asc" data-field="num">
                                <span class="arrow-up up-gray"></span>
                                <span class="arrow-down down-red"></span>
                            </div>
                        <?php endif; ?>
                    <?php else: ?>
                        <div class="arrow-box" data-dir="desc" data-field="num">
                            <span class="arrow-up up-gray"></span>
                            <span class="arrow-down down-gray"></span>
                        </div>
                    <?php endif; ?>

                </th>
                <th data-sortable="true">
                    <span class="table-name">单价(元)</span>
                    <?php if ($sort == 'price'): ?>
                        <?php if ($sort_d == 'asc'): ?>
                            <div class="arrow-box" data-dir="desc" data-field="price">
                                <span class="arrow-up up-red"></span>
                                <span class="arrow-down down-gray"></span>
                            </div>
                        <?php else: ?>
                            <div class="arrow-box" data-dir="asc" data-field="price">
                                <span class="arrow-up up-gray"></span>
                                <span class="arrow-down down-red"></span>
                            </div>
                        <?php endif; ?>
                    <?php else: ?>
                        <div class="arrow-box" data-dir="desc" data-field="price">
                            <span class="arrow-up up-gray"></span>
                            <span class="arrow-down down-gray"></span>
                        </div>
                    <?php endif; ?>
                </th>
                <th data-sortable="true">
                    <span class="table-name">小计(元)</span>
                    <?php if ($sort == 'total'): ?>
                        <?php if ($sort_d == 'asc'): ?>
                            <div class="arrow-box" data-dir="desc" data-field="total">
                                <span class="arrow-up up-red"></span>
                                <span class="arrow-down down-gray"></span>
                            </div>
                        <?php else: ?>
                            <div class="arrow-box" data-dir="asc" data-field="total">
                                <span class="arrow-up up-gray"></span>
                                <span class="arrow-down down-red"></span>
                            </div>
                        <?php endif; ?>
                    <?php else: ?>
                        <div class="arrow-box" data-dir="desc" data-field="total">
                            <span class="arrow-up up-gray"></span>
                            <span class="arrow-down down-gray"></span>
                        </div>
                    <?php endif; ?>
                </th>
            </tr>
            <tbody>
            <?php if (isset($goods) && count($goods)): ?>
                <?php foreach ($goods as $key => $or): ?>
                    <!--                    <tr>-->
                    <!--                        <td>--><?php //echo $key + 1 ?><!--</td>-->
                    <!--                        <td>--><?php //echo $or['product_id'] ?><!--</td>-->
                    <!--                        <td>--><?php //echo $or['product_name'] ?><!--</td>-->
                    <!--                        <td>--><?php ////echo json_decode($or['sku_info']) ?><!--</td>-->
                    <!--                        <td>--><?php //echo $or['sum(num)'] ?><!--</td>-->
                    <!--                        <td>--><?php //echo $or['price'] ?><!--</td>-->
                    <!--                        <td>--><?php //echo $or['sum(num*price)'] ?><!--</td>-->
                    <!--                    </tr>-->
                <?php endforeach; ?>
            <?php endif; ?>
            </tbody>
        </table>

        <div class="box" id="box"></div>
    </div>
</div>
<?php $this->load->view('common/bottom.php'); ?>

<!--<script src="public/js/jquery.min.js"></script>-->
<script src="public/js/bootstrap-table.min.js"></script>
<script src="public/js/paging.min.js"></script>
<script src="public/js/dcalendar.picker.goods.js"></script>

<script type="text/javascript" src="public/js/jquery.query-object.js" charset="utf-8"></script>


<script type="text/javascript" src="public/js/xlsx.core.min.js"></script>
<script type="text/javascript" src="public/js/FileSaver.js"></script>
<script type="text/javascript" src="public/js/jquery.table2excel.js"></script>


<script>

    $('.button-default').hide();

    $('#axe').on('click', function (event) {

        var ie = (function () {

            var undef,
                v = 3,
                div = document.createElement('div'),
                all = div.getElementsByTagName('i');

            while (
                div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->',
                    all[0]
                ) ;

            return v > 4 ? v : undef;

        }());
        if ((typeof(ie) == 'undefined') == true) {

            var product_name = $('#product_name').val();
            var mydatepicker = $('#mydatepicker').val();
            var mydatepicker2 = $('#mydatepicker2').val();
            var sort = '<?php echo $sort;?>';
            var sort_d = '<?php echo $sort_d;?>';
            // console.log(mydatepicker);
            // console.log(mydatepicker2);
            // console.log(goods_id);
            $.ajax({
                type: "post",
                dataType: "json",
                url: "information/information_purchase_product",
                data: {
                    'page': 1,
                    'row': 1,
                    'mydatepicker': mydatepicker,
                    'mydatepicker2': mydatepicker2,
                    'product_name': product_name,
                    'sort': sort,
                    'sort_d': sort_d
                },
                success: function (data) {
                    console.log(data);
                    var html = '';
                    $(data.data).each(function (key, val) {
                        var sku_s = '';
                        if (val.sku_info) {
                            var sku = jQuery.parseJSON(val.sku_info)
                            $.each(sku, function (k, v) {
                                sku_s += k + ":" + v + "&nbsp;&nbsp;&nbsp;";
                            })
                        }
                        html += ' <tr>';
                        html += ' <td>' + (key + 1) + '</td>';
                        html += ' <td>' + val.product_id + '</td>';
                        html += ' <td><a target="_blank" href="<?php echo base_url();?>goods/detail?id=' + val.product_id + '">' + val.product_name + '</td>';
                        html += ' <td>' + sku_s + '</td>';
                        html += ' <td>' + val.num + '</td>';
                        html += ' <td>' + val.price + '</td>';
                        html += ' <td>' + val.total + '</td>';
                        html += ' </tr>';
                    })
                    $("#table tbody:last").html(html);
                    var DefaultTable = document.getElementById('table');
                    var table = new TableExport(DefaultTable, {
                        headers: true,                              // (Boolean), display table headers (th or td elements) in the <thead>, (default: true)
                        footers: true,                              // (Boolean), display table footers (th or td elements) in the <tfoot>, (default: false)
                        formats: ['xlsx'],                          // (String[]), filetype(s) for the export, (default: ['xlsx', 'csv', 'txt'])
                        filename: '数据报表-商品采购统计',                             // (id, String), filename for the downloaded file, (default: 'id')
                        bootstrap: false,                           // (Boolean), style buttons using bootstrap, (default: false)
                        exportButtons: true,
                        position: 'bottom',                         // (top, bottom), position of the caption element relative to table, (default: 'bottom')
                        ignoreRows: null,                           // (Number, Number[]), row indices to exclude from the exported file(s) (default: null)
                        ignoreCols: null,                           // (Number, Number[]), column indices to exclude from the exported file(s) (default: null)
                        ignoreCSS: '.tableexport-ignore',           // (selector, selector[]), selector(s) to exclude cells from the exported file(s) (default: '.tableexport-ignore')
                        emptyCSS: '.tableexport-empty',             // (selector, selector[]), selector(s) to replace cells with an empty string in the exported file(s) (default: '.tableexport-empty')
                        trimWhitespace: false                        // (Boolean), remove all leading/trailing newlines, spaces, and tabs from cell text in the exported file(s) (default: true)
                    });

                    $('.button-default').trigger('click');
                },
                error: function () {
                    console.log('error')
                }

            });

        } else {
            layer.alert('浏览器版本过低，请更新您的浏览器或使用其他浏览器导出报表');
        }

        event.stopPropagation();

        return false;
    });


    var setTotalCount = 301;
    $('#box').paging({
        initPageNo: 1, // 初始页码
        totalPages: <?php echo ceil(count($goods) / 10) ?>, //总页数
        totalCount: '', // 条目总数
        slideSpeed: 600, // 缓动速度。单位毫秒
        jump: true, //是否支持跳转
        callback: function (page) { // 回调函数
            console.log(page);
            var product_name = $('#product_name').val();
            var mydatepicker = $('#mydatepicker').val();
            var mydatepicker2 = $('#mydatepicker2').val();
            var sort = '<?php echo $sort;?>';
            var sort_d = '<?php echo $sort_d;?>';
            // console.log(mydatepicker);
            // console.log(mydatepicker2);
            // console.log(goods_id);
            $.ajax({
                type: "post",
                dataType: "json",
                url: "information/information_purchase_product",
                data: {
                    'page': page,
                    'mydatepicker': mydatepicker,
                    'mydatepicker2': mydatepicker2,
                    'product_name': product_name,
                    'sort': sort,
                    'sort_d': sort_d
                },
                success: function (data) {
                    var html = '';
                    $(data.data).each(function (key, val) {
                        var sku_s = '';
                        if (val.sku_info) {
                            var sku = jQuery.parseJSON(val.sku_info)
                            $.each(sku, function (k, v) {
                                sku_s += k + ":" + v + "&nbsp;&nbsp;&nbsp;";
                            })
                        }
                        html += ' <tr>';
                        html += ' <td>' + (key + 1) + '</td>';
                        html += ' <td>' + val.product_id + '</td>';
                        html += ' <td><a target="_blank" href="<?php echo base_url();?>goods/detail?id=' + val.product_id + '">' + val.product_name + '</td>';
                        html += ' <td>' + sku_s + '</td>';
                        html += ' <td>' + val.num + '</td>';
                        html += ' <td>' + val.price + '</td>';
                        html += ' <td>' + val.total + '</td>';
                        html += ' </tr>';
                    })
                    $(".table tbody:last").html(html);
                },
                error: function () {
                    console.log('error')
                }

            });

        }
    });

    var _date = new Date();
    // console.log( format);
    $('#mydatepicker').dcalendarpicker({
        format: 'yyyy-MM-dd',
        defaultDate: '2',
        changeYear: true
    }).on('dateselected', function (e) {
        goUrl(e.date)
    });
    $('#mydatepicker2').dcalendarpicker({
        format: 'yyyy-MM-dd',
        defaultDate: _date
    }).on('dateselected', function (e) {
        goUrl(false, e.date)
    });
</script>
<script type="text/javascript">
    $('.arrow-box').on('click', function () {
        var field = $(this).attr('data-field');
        var dir = $(this).attr('data-dir');
        goUrl(false, false, false, field, dir)
    });

    function goUrl(s, e, n, o, d) {
        if (!s) {
            var s = $('#mydatepicker').val();
        }
        if (!e) {
            var e = $('#mydatepicker2').val();
        }
        if (!n) {
            var n = $('#product_name').val();
        }
        if (!o) {
            var o = "<?php echo $sort;?>";
        }
        if (!d) {
            var d = "<?php echo $sort_d;?>";
        }

        window.location.search = jQuery.query
            .set("mydatepicker", s)
            .set("mydatepicker2", e)
            .set("product_name", n)
            .set("sort", o)
            .set("sort_d", d)

    }

    $("#product_name").keydown(function (event) {
        event = event || window.event;
        if (event.keyCode == 13) {
            $("#data-form").submit();
        }
    });

    $("#data-form").on('submit', function (event) {
        event.stopPropagation();
        goUrl(false, false, $("#product_name").val());
        return false;
    })

    //$('.calendar').on('click',function(){
    //    var  myd= $('#mydatepicker').val(),
    //        myd2=$('#mydatepicker2').val();
    //    $('#mydatepicker').attr('placeholder',myd);
    //    $('.mydatepicker2').val(myd);
    //    $('#mydatepicker2').attr('placeholder',myd2);
    //    var admin= $('#admin').val();
    //    var account= $('#account').val();
    //    var user= $('#user').val();
    //    console.log($('#mydatepicker').val());
    //    console.log($('#mydatepicker2').val());
    //    // window.location.search = jQuery.query.set("myd", myd).set("myd2", myd2);
    //    //location.replace("<?php ////echo base_url()?>////information/information_purchase_user?ymd="+myd+"&ymd2="+myd2+"&admin="+admin+"&account="+account+"&user="+user);
    //})
</script>
</body>
</html>

